<template>
	<view class="page">
		<view class="header" >
			<view class="score dis-flex" v-if="com_score>0">
				<view class="synthesize flex-box">
					<view class="m-b-18 f_28">综合评分</view>
					<view class="">
						<image v-for="(item,index) in 5" :key="index" :src="index<com_score?imgPrefix('/static/image/icon/comment_status_1.png'):imgPrefix('/static/image/icon/comment_status_0.png')" lazy-load></image>
					</view>
				</view>
				<view class="result flex-box dis-flex flex-y-center flex-dir-column">
					<view class="m-b-18 f_28">效果满意度</view>
					<view class="f_28">{{result_like}}</view>
				</view>
				<view class="serve flex-box dis-flex flex-y-center flex-dir-column">
					<view class="m-b-18 f_28">服务满意度</view>
					<view class="f_28">{{service_like}}</view>
				</view>
			</view>
			<view class="tag-box dis-flex" v-if="tagList.length>0">
				<view v-for="(tag_item,index) in tagList" :key="index" class="tag" @click="pitchTag(tag_item.id)">
					{{tag_item.tag_name}}
				</view>
			</view>
		</view>
		<view class="comment-list">
			<comment-list :commentList="commentList" :type="0" @bindReply="bindReply"></comment-list>
			<load-more :status="loadingStatus" text="暂无评价"></load-more>
		</view>
	</view>
</template>

<script>
import commentList from '@/components/comment-list/index.vue'
import loadMore from '@/components/loadmore/index.vue';
import {getIsIPhoneX} from '@/static/uitls/common.js'; // 机型判断
import API from '@/static/api/index.js';
const app = getApp();
export default{
	name:'index',
	components: {
		commentList,
		loadMore
	},
	onLoad(options) {
		this.id=options.teacher_course_id
		this._getCourseComment()
	},
	watch: {
		page(val, oldVal) {
			this._getCourseComment();
		}
	},
	onReachBottom() {
		let { isRequest, page, total, commentList } = this;
		if (!isRequest && (page == 1 || commentList.length < total)) {
			this.page += 1;
		}
	},
	methods:{
		bindReply(course_comment_id,replyValue){
			app._log(course_comment_id,replyValue)
			let obj={
				course_comment_id:course_comment_id,
				content:replyValue
			}
			API.commentReplay(obj).then(res=>{
				if(res.code==1){
					this.showToast('回复成功','success')
					setTimeout(() => {
						this.page=1;
						this._getCourseComment();
					}, 1000)
					
				}else{
					this.showToast(res.msg)
				}
			})
		},
		_getCourseComment(){
			let that = this
			// API.getCourseComment(id,page,size).then(res=>{
				let {loadingStatus,isRequest,commentList,id,page,size}=this;
				if(!isRequest){
					loadingStatus = 'loading';
					this.isRequest=true
					
					let send = this.userIdentity==0?API.getCourseComment(id,page,size):API.getTeacherComment({page:page,size:size})
					send.then(res=>{
						// that.commentList=res.data.comments
						if(res.code==1){
							that.result_like=res.data.result_like//效果百分比
							that.result_score=res.data.result_score//效果评分
							that.service_like=res.data.service_like//服务百分比
							that.service_score=res.data.service_score//服务评分
							that.com_score=res.data.com_score
							that.tagList=res.data.tag
							// this.commentList = [...(page==1?[]:this.commentList),...res.data.comments];
							// this.loadingStatus = res.data.comments.length==0?'getmore':'nomore';
							// this.page+=res.data.comments.length==0?0:1
							
							let list = page == 1 ? res.data.comments : commentList.concat(res.data.comments);
							this.commentList = list;
							this.total = res.data.total;
							app._log('数量', list.length, res.data.total);
							this.loadingStatus = list.length >= res.data.total ? 'nomore' : 'getmore';
						}else{
							this.loadingStatus = res.code == 405 ? (page == 1 ? 'empty' : 'nomore') : 'error';
							if (page == 1) {
								this.commentList = [];
								this.total = 0;
							}
						}
						this.isRequest=false
					})
				}
			// })
		},
		pitchTag(id){
			app._log(id)
		},
		// 点击加载
		bindLoading(){
			if(this.loadingStatus=='error'||this.loadingStatus=='empty'){
				this.page=1;
				this._getCourseComment();
			}
		},
	},
	data(){
		return{
			id:'',//教师id
			isRequest:false,
			loadingStatus: 'loading',
			page:1,
			size:10,
			total:0,//总条数
			result_like:'',//效果百分比
			result_score:'',//效果评分
			service_like:'',//服务百分比
			service_score:'',//服务评分
			com_score:'',//综合分数
			//tag列表
			tagList:[],
			commentList:[
				// {
				// 	course_comment_id	:	"3",
				// 	course_order_id	:	"0",
				// 	teacher_course_id	:	"3",
				// 	user_id	:	"3",
				// 	result_score	:	"5",
				// 	service_score	:	"5",
				// 	content	:	"哈哈哈哈哈",
				// 	createtime	:	"2020-07-21 11:38:12",
				// 	user:{
				// 		user_id:3,
				// 		nickname:"冰807",
				// 		avatar:"https://keyu.lclook.comasdf"
				// 	},
				// 	tag:[
				// 		{tag_id:2,tag_name:"教学"}
				// 	]
				// },
				// {
				// 	course_comment_id	:	"3",
				// 	course_order_id	:	"0",
				// 	teacher_course_id	:	"3",
				// 	user_id	:	"3",
				// 	result_score	:	"5",
				// 	service_score	:	"5",
				// 	content	:	"哈哈哈哈哈",
				// 	createtime	:	"2020-07-21 11:38:12",
				// 	user:{
				// 		user_id:3,
				// 		nickname:"冰807",
				// 		avatar:"https://keyu.lclook.comasdf"
				// 	},
				// 	tag:[
				// 		{tag_id:2,tag_name:"教学"}
				// 	]
				// },
				// {
				// 	course_comment_id	:	"3",
				// 	course_order_id	:	"0",
				// 	teacher_course_id	:	"3",
				// 	user_id	:	"3",
				// 	result_score	:	"5",
				// 	service_score	:	"5",
				// 	content	:	"哈哈哈哈哈",
				// 	createtime	:	"2020-07-21 11:38:12",
				// 	user:{
				// 		user_id:3,
				// 		nickname:"冰807",
				// 		avatar:"https://keyu.lclook.comasdf"
				// 	},
				// 	tag:[
				// 		{tag_id:2,tag_name:"教学"}
				// 	]
				// },{
				// 	course_comment_id	:	"3",
				// 	course_order_id	:	"0",
				// 	teacher_course_id	:	"3",
				// 	user_id	:	"3",
				// 	result_score	:	"5",
				// 	service_score	:	"5",
				// 	content	:	"哈哈哈哈哈",
				// 	createtime	:	"2020-07-21 11:38:12",
				// 	user:{
				// 		user_id:3,
				// 		nickname:"冰807",
				// 		avatar:"https://keyu.lclook.comasdf"
				// 	},
				// 	tag:[
				// 		{tag_id:2,tag_name:"教学"}
				// 	]
				// },
				// {
				// 	course_comment_id	:	"3",
				// 	course_order_id	:	"0",
				// 	teacher_course_id	:	"3",
				// 	user_id	:	"3",
				// 	result_score	:	"5",
				// 	service_score	:	"5",
				// 	content	:	"哈哈哈哈哈",
				// 	createtime	:	"2020-07-21 11:38:12",
				// 	user:{
				// 		user_id:3,
				// 		nickname:"冰807",
				// 		avatar:"https://keyu.lclook.comasdf"
				// 	},
				// 	tag:[
				// 		{tag_id:2,tag_name:"教学"}
				// 	]
				// },
				// {
				// 	course_comment_id	:	"3",
				// 	course_order_id	:	"0",
				// 	teacher_course_id	:	"3",
				// 	user_id	:	"3",
				// 	result_score	:	"5",
				// 	service_score	:	"5",
				// 	content	:	"哈哈哈哈哈",
				// 	createtime	:	"2020-07-21 11:38:12",
				// 	user:{
				// 		user_id:3,
				// 		nickname:"冰807",
				// 		avatar:"https://keyu.lclook.comasdf"
				// 	},
				// 	tag:[
				// 		{tag_id:2,tag_name:"教学"}
				// 	]
				// },
				// {
				// 	course_comment_id	:	"3",
				// 	course_order_id	:	"0",
				// 	teacher_course_id	:	"3",
				// 	user_id	:	"3",
				// 	result_score	:	"5",
				// 	service_score	:	"5",
				// 	content	:	"哈哈哈哈哈",
				// 	createtime	:	"2020-07-21 11:38:12",
				// 	user:{
				// 		user_id:3,
				// 		nickname:"冰807",
				// 		avatar:"https://keyu.lclook.comasdf"
				// 	},
				// 	tag:[
				// 		{tag_id:2,tag_name:"教学"}
				// 	]
				// },
				// {
				// 	course_comment_id	:	"3",
				// 	course_order_id	:	"0",
				// 	teacher_course_id	:	"3",
				// 	user_id	:	"3",
				// 	result_score	:	"5",
				// 	service_score	:	"5",
				// 	content	:	"哈哈哈哈哈",
				// 	createtime	:	"2020-07-21 11:38:12",
				// 	user:{
				// 		user_id:3,
				// 		nickname:"冰807",
				// 		avatar:"https://keyu.lclook.comasdf"
				// 	},
				// 	tag:[
				// 		{tag_id:2,tag_name:"教学"}
				// 	]
				// }
			]
		}
	}
}
</script>

<style lang="scss">
	
	.header{
		background-color: white;
		position: sticky;
		width: 100%;
		top: 0px;
		left: 0;
		z-index: 9;
		.score{
			font-size: 0;
			padding: 32rpx 0;
			margin: 0 48rpx;
			// border-bottom: 1px solid #ededed;
			.synthesize{
				image{
					width: 32rpx;
					height: 32rpx;
					margin-right: 4rpx;
				}
			}
		}
		.tag-box{
			border-top: 1px solid #ededed;
			flex-wrap:wrap;
			margin: 0rpx 48rpx 0 48rpx;
			padding-top: 24rpx;
			.tag{
				color: #7f4aff;
				background-color: rgba(127, 74, 255, 0.08);
				margin-bottom: 24rpx;
				white-space: nowrap;
				margin-right: 16rpx;
				font-size: 26rpx;
				border-radius: 8rpx;
				padding: 12rpx 16rpx;
			}
		}
	}
	.m-b-18{
		margin-bottom: 18rpx;
	}
	.m-b-12{
		margin-bottom: 12rpx;
	}
	.comment-list{
	}
</style>
